import React from 'react';
import {Button, Space, Tooltip} from "antd";
import {
  BlockOutlined,
  CopyOutlined,
  DeleteOutlined,
  DownOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  RedoOutlined,
  UndoOutlined,
  UpOutlined
} from "@ant-design/icons";
import {useDispatch} from "react-redux";
import {
  changeComponentIsHidden,
  copySelectedComponent,
  deleteComponent,
  moveComponent,
  pasteComponent,
  selectNextComponent,
  selectPrevComponent,
  toggleComponentLocked
} from "../../../redux/componentsReducer";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {ActionCreators as UndoActionCreators} from 'redux-undo'

const EditToolbar: React.FC = () => {
  const dispatch = useDispatch()
  const {componentList, selectedId, selectedComponent, copyComponent} = useGetComponentInfo()
  const {isLocked,} = selectedComponent || {}
  const oldIndex = componentList.findIndex(c => c.fe_id === selectedId)
  let isFirst = oldIndex === 0
  let isLast = oldIndex === componentList.length - 1

  function handleDelete() {
    dispatch(deleteComponent())
  }

  function handleIsHidden() {
    dispatch(changeComponentIsHidden({fe_id: selectedId, isHidden: true}))
  }

  function handleLocked() {
    dispatch(toggleComponentLocked({fe_id: selectedId}))
  }

  function handleCopy() {
    dispatch(copySelectedComponent())
  }

  function handlePaste() {
    dispatch(pasteComponent())
  }

  function handleUp() {
    dispatch(selectPrevComponent())
  }

  function handleDown() {
    dispatch(selectNextComponent())
  }

  function handleMoveForward() {
    if (isFirst) return
    dispatch(moveComponent({oldIndex, newIndex: oldIndex - 1}))
  }

  function handleMoveBackWard() {
    if (isLast) return
    dispatch(moveComponent({oldIndex, newIndex: oldIndex + 1}))

  }

  function undo() {
    dispatch(UndoActionCreators.undo())
  }

  function redo() {
    dispatch(UndoActionCreators.redo())
  }

  return (
    <Space>
      <Tooltip title={'删除'}>
        <Button shape={'circle'} icon={<DeleteOutlined/>} onClick={handleDelete}> </Button>
      </Tooltip>
      <Tooltip title={'隐藏'}>
        <Button shape={'circle'} icon={<EyeInvisibleOutlined/>} onClick={handleIsHidden}></Button>
      </Tooltip>
      <Tooltip title={'锁定'}>
        <Button shape={'circle'} icon={<LockOutlined/>}
                type={isLocked ? 'primary' : 'default'}
                onClick={handleLocked}></Button>
      </Tooltip>
      <Tooltip title={'复制'}>
        <Button shape={'circle'} icon={<CopyOutlined/>}
                onClick={handleCopy}></Button>
      </Tooltip>
      <Tooltip title={'粘贴'}>
        <Button shape={'circle'} icon={<BlockOutlined/>}
                disabled={copyComponent === null}
                onClick={handlePaste}></Button>
      </Tooltip>
      <Tooltip title={'向上'}>
        <Button shape={'circle'} icon={<UpOutlined/>}
                onClick={handleMoveForward}></Button>
      </Tooltip>
      <Tooltip title={'向下'}>
        <Button shape={'circle'} icon={<DownOutlined/>}
                onClick={handleMoveBackWard}></Button>
      </Tooltip>
      <Tooltip title={'撤销'}>
        <Button shape={'circle'} icon={<UndoOutlined/>}
                onClick={undo}></Button>
      </Tooltip>
      <Tooltip title={'重做'}>
        <Button shape={'circle'} icon={<RedoOutlined/>}
                onClick={redo}></Button>
      </Tooltip>
    </Space>
  );
};

export default EditToolbar;
